<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack的插件</title>
  <!-- 
  Webpack 插件是 Webpack 的重要组成部分，用于扩展 Webpack 的功能。与加载器（loader）不同，加载器主要用于处理模块的转换，而插件则可以对整个构建过程进行更深层次的控制。
  1. HtmlWebpackPlugin
  - 功能：自动生成 HTML 文件，并将打包后的资源（如 JavaScript 和 CSS 文件）注入到 HTML 中。
  - 用法：
  const HtmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html', // 模板文件
          filename: 'index.html', // 输出文件名
        }),
      ],
    };
  2. MiniCssExtractPlugin
  - 功能：将 CSS 提取到单独的文件中，而不是将其嵌入到 JavaScript 文件中。
  - 用法：
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');

    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
          },
        ],
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: '[name].css', // 输出文件名
        }),
      ],
    };
  3. CleanWebpackPlugin
  - 功能：在每次构建之前清理输出目录，确保输出目录中只包含最新的构建文件。
  - 用法：
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');

    module.exports = {
      plugins: [
        new CleanWebpackPlugin(),
      ],
    };
  4. DefinePlugin
  - 功能：创建全局常量，以便在编译时替换代码中的值，常用于环境变量的管理。
  - 用法：
  const webpack = require('webpack');

    module.exports = {
      plugins: [
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('production'), // 设置环境变量
        }),
      ],
    };
  5. CompressionPlugin
  - 功能：使用 gzip 压缩输出的资源文件，减小文件体积，提高加载速度。
  - 用法：
  const CompressionPlugin = require('compression-webpack-plugin');

    module.exports = {
      plugins: [
        new CompressionPlugin({
          test: /\.js$|\.css$|\.html$/, // 需要压缩的文件类型
        }),
      ],
    };
  6. BundleAnalyzerPlugin
  - 功能：可视化分析打包后的文件大小，帮助优化构建。
  - 用法：
  const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

    module.exports = {
      plugins: [
        new BundleAnalyzerPlugin(),
      ],
    };
  总结
  Webpack 插件可以帮助开发者在构建过程中实现许多功能，如自动生成 HTML、提取 CSS、清理输出目录、定义全局变量、压缩文件和分析打包文件等。通过合理使用这些插件，可以优化构建流程，提高项目的性能和可维护性。

  cnpm install webpack webpack-cli css-loader less less-loader style-loader postcss-loader postcss-preset-env @babel/plugin-transform-arrow-functions @babel/plugin-transform-block-scoping @babel/preset-env babel-loader @babel/core clean-webpack-plugin html-webpack-plugin --save-dev

  cnpm install vue
  -->
  <!-- 
   问题记录: Error “Cannot find module 'import-local'”报错
    问题：在搭建项目时，npm run dev时，出现“Cannot find module 'import-local'”报错
    解决办法：
    由于项目中安装第三方包时，cnpm和npm混合使用，导致报错，只要把项目中的node_modules文件夹删掉，统一用cnpm install，或者npm install 重新下载第三方包，就能解决报错问题
  -->
</head>
<body>

  <div id="app"></div>

  <script src="./dist/bundle.js"></script>
  
</body>
</html>